<script setup lang="ts">
import VideoPlayer from '/@/components/player/VideoPlayer/index.vue';
import { getFactoryRiskPartitionInfo } from '/@/api/sms/sms';
import { ref, watch, defineProps } from 'vue';
const props = defineProps<{
	positionId: any;
}>();

const riskPartitionInfo = ref({});
/*** getTree 获取组织架构树类型 */
const getRiskPartitionInfo = async (id?: string) => {
	const res = await getFactoryRiskPartitionInfo({ id });
	riskPartitionInfo.value = res.data;
};
watch(props, () => {
	getRiskPartitionInfo(props.positionId);
});
</script>

<template>
	<div class="risk-dialog">
		<p class="risk-name">{{ riskPartitionInfo.v_Name }}</p>
		<div class="video-player" v-if="riskPartitionInfo.cameraDeviceMediaUrls">
			<div v-for="item in riskPartitionInfo.cameraDeviceMediaUrls" :key="item.mediaUrl">
				<VideoPlayer :url="item.mediaUrl" :key="item.mediaUrl" />
			</div>
		</div>
		<div class="hr-flex-between">
			<span>风险等级</span>
			<span style="color: #ff5f33">{{ riskPartitionInfo.n_RiskLevel }}级</span>
		</div>
		<div class="hr-flex-between">
			<span>负责人</span>
			<span>{{ riskPartitionInfo.v_ResponsibleMan }}</span>
		</div>
		<div class="hr-flex-between">
			<span>负责人电话</span>
			<span>{{ riskPartitionInfo.v_ResponsibleManPhone }}</span>
		</div>
		<div class="hr-flex-between">
			<span>风险隐患</span>
			<span style="color: #ff5f33">{{ riskPartitionInfo.n_HiddenCount }}</span>
		</div>
		<div class="hr-flex-between">
			<span>风险辨识清单</span>
			<span style="color: #ff5f33">{{ riskPartitionInfo.riskIdentificationCount }}</span>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.risk-dialog {
	width: 100%;
	height: 100%;
	background: rgba(28, 21, 21, 0.4);
	padding: 10px;
	.risk-name {
		text-align: center;
		color: rgb(255, 255, 255);
		font-size: 14px;
		font-weight: 400;
		line-height: 23px;
		letter-spacing: 0px;
		background: rgba(255, 95, 51, 0.6);
	}
	.video-player {
		height: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		box-sizing: border-box;
		display: flex;
		div {
			width: 158px;
			height: 80px;
			margin-right: 15px;
		}
		div:last-child {
			margin-right: 0;
		}
	}
	div {
		margin-top: 5px;
		font-size: 12px;
	}
}
</style>
